<template>
  <div>
    <ElTag>{{ name }}</ElTag>
    <ElButton @click="console.log(a.value++)">{{ a.value }}</ElButton>
    <ElButton type="primary" @click="go()">{{ b }}</ElButton>
    <ElButton type="primary" @click="b++">{{ b }}</ElButton>
    <span>{{ person }}</span>
    <ElButton>go</ElButton>
    <span>{{ personEx }}</span>
    <ElButton @click="goEx()">go</ElButton>
    <ElDivider>next</ElDivider>
    <ElForm inline>
      <ElFormItem label="lableLike">
        <ElInput v-model="queryCondition.lableLike"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton icon="Search" type="primary" @click="queryByCondition(1)"></ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable :data="pageRs.results">
      <ElTableColumn prop="materialCode" label="materialCode"></ElTableColumn>
      <ElTableColumn prop="materialLable" label="materialLable"></ElTableColumn>
      <ElTableColumn prop="materialType" label="materialType"></ElTableColumn>
      <ElTableColumn prop="suggestPrice" label="suggestPrice"></ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="pageRs.total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
  </div>
</template>
<script lang="ts" setup>
// const a = 1;
const name = 'zhangsan'
const a = reactive({ value: 1 })
const b = ref(1)
const go = () => {
  console.log(b)
  b.value++
}
const person = {
  name: 'lisi',
  age: 11
}
const personEx = reactive({
  name: 'lisi',
  age: 11
})
const goEx = () => {
  personEx.age++
  console.log(personEx)
}
// -----------divider --------

const pageRs = reactive({
  total: 0,
  results: []
})
const queryCondition = reactive({
  lableLike: '',
  materialTypes: [],
  pageNum: 1,
  pageSize: 3
})
const queryByCondition = async (pageNum?: number) => {
  if (pageNum) {
    queryCondition.pageNum = pageNum
  }
  const res = await axios({
    method: 'post',
    url: 'http://localhost:7001/material/query',
    data: queryCondition
  })
  pageRs.total = res.data.total
  pageRs.results = res.data.results
}

onMounted(() => {
  console.log('xxxx')
  queryByCondition(1)
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
